<template>
  <dv-border-box1>
    <div class="production-capacity">
      <div class="header">
        <span class="title">产量建设</span>
        <span class="legend">
          <span class="legend-item unfinished"></span>
          未完成
          <span class="legend-item finished"></span>
          已完成
        </span>
      </div>
      <div class="charts">
        <div ref="wellChart" class="chart"></div>
        <div ref="outputChart" class="chart"></div>
      </div>
    </div>
  </dv-border-box1>
</template>

<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue'
  import * as echarts from 'echarts'

  const wellChart = ref()
  const outputChart = ref()
  let wellInstance: echarts.ECharts
  let outputInstance: echarts.ECharts
  //当前视口宽度
  let nowClientWidth = ref(document.documentElement.clientWidth)
  //换算方法
  function nowSize(val: number, initWidth = 1920) {
    return val * (nowClientWidth.value / initWidth)
  }

  // 获取基础配置
  const getBaseOption = (title: string, value: string) => ({
    title: {
      text: value,
      left: 'center',
      top: '30%',
      textStyle: {
        color: '#000',
        fontSize: nowSize(22),
        fontWeight: 'bold',
        align: 'center',
      },
    },
    graphic: [
      {
        type: 'text',
        left: 'center',
        top: '70%',
        style: {
          text: title,
          fill: '#000',
          font: `${nowSize(16)}px Microsoft YaHei`,
          textAlign: 'center',
          fontWeight: 'bold',
        },
      },
    ],
  })

  // 获取饼图配置
  const getPieOption = (data: { value: number; name: string; itemStyle: { color: string } }[]) => ({
    series: [
      {
        type: 'pie',
        radius: ['70%', '90%'],
        avoidLabelOverlap: false,
        center: ['50%', '40%'],
        label: {
          show: false,
          position: 'center',
          formatter: '{d}%',
          fontSize: 14,
          fontWeight: 'bold',
        },
        labelLine: {
          show: false,
        },
        data,
      },
    ],
  })

  // 更新图表配置
  const updateCharts = () => {
    wellInstance.setOption({
      ...getBaseOption('投产井数对比', '10\n口'),
      ...getPieOption([
        { value: 10, name: '已完成', itemStyle: { color: '#3cf0c5' } },
        { value: 100, name: '未完成', itemStyle: { color: '#2a6cf4' } },
      ]),
    })

    outputInstance.setOption({
      ...getBaseOption('产量对比', '17.4\n万吨'),
      ...getPieOption([
        { value: 0, name: '未完成', itemStyle: { color: '#2a6cf4' } },
        { value: 100, name: '已完成', itemStyle: { color: '#3cf0c5' } },
      ]),
    })
  }

  // 处理窗口大小变化
  const handleResize = () => {
    nowClientWidth.value = document.documentElement.clientWidth
    updateCharts()
    wellInstance.resize()
    outputInstance.resize()
  }

  onMounted(() => {
    wellInstance = echarts.init(wellChart.value)
    outputInstance = echarts.init(outputChart.value)
    updateCharts()
    window.addEventListener('resize', handleResize)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
    wellInstance?.dispose()
    outputInstance?.dispose()
  })
</script>

<style scoped lang="scss">
  .production-capacity {
    border-radius: 10px;
    padding: 16px;
    color: #000;
    .header {
      display: flex;
      align-items: center;
      .title {
        font-size: 18px;
        font-weight: bold;
        margin-right: 16px;
      }
      .legend {
        font-size: 14px;
        .legend-item {
          display: inline-block;
          width: 12px;
          height: 12px;
          border-radius: 2px;
          margin: 0 4px 0 12px;
          vertical-align: middle;
        }
        .unfinished {
          background: #2a6cf4;
        }
        .finished {
          background: #3cf0c5;
        }
      }
    }
    .charts {
      display: flex;
      justify-content: space-around;
      margin-top: 16px;
      .chart {
        width: 140px;
        height: 280px;
        position: relative;
        // min-height: 250px;
      }
    }
  }
</style>
